import React, {Component} from 'react';
import {Map, List} from 'immutable';
import moment from 'moment';

import {Modal, Form, Row, Col, Select, Input, InputNumber} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

import noop from 'util/noop';
import classNames from 'classnames';

class Deliver extends Component {
    static defaultProps = {
        order: Map(),
        expressCompany: List(),
        visible: false,
        confirmLoading: true,
        onOk: noop,
        onCancel: noop
    }


    render() {
        const formItemLayout = {
            labelCol: {span: 3},
            wrapperCol: {span: 16},
        };

        const {visible, order, expressCompany, confirmLoading, form:{getFieldDecorator}} = this.props;

        const tidField = getFieldDecorator('tid', {
            initialValue: order.get('tid')
        })(<Input className="hide"/>)

        //物流公司
        const expressCompanyField = getFieldDecorator('logisticCompanyId', {
            rules: [
                {required: order.get('shipMethodId') !== 'self', message: '请选择物流公司'}
            ]
        })(<Select placeholder="请选择物流公司" notFoundContent="暂无物流公司信息">
            {
                expressCompany.map((com, index)=><Option key={`index+com.get('scode')`} value={com.get('scid')}>{com.get('sname')}</Option>)
            }
        </Select>);

        //物流单号
        const trackingNumberField = getFieldDecorator('logisticNo', {
            rules: [
                {required: order.get('shipMethodId') !== 'self', message: '请输入物流单号'}
            ]
        })(<Input placeholder="请输入物流单号" className="w220" maxLength={25}/>);

        //物流费用
        const logisticsFeesField = getFieldDecorator('logisticFee', {
            rules: [
                {
                    validator: this.checkLogisticsFees
                }
            ]
        })(<InputNumber placeholder="请输入物流费用" className="w220" max={10000}/>);

        //发货备注
        const  deliveryNoteField = getFieldDecorator('remark')(
            <Input type="textarea" placeholder="请输入备注内容" rows={4} maxLength={64}/>);


        const hideClassName = classNames({
            hide: order.get('shipMethodId') === 'self'
        })

        return (
            <Modal visible={visible}
                   confirmLoading={confirmLoading}
                   title="订单发货"
                   width={800}
                   onOk={()=>this.onOk()}
                   onCancel={()=>this.onCancel()}>
                <Form>
                    <FormItem>{tidField}</FormItem>
                    <FormItem {...formItemLayout}
                              className={hideClassName}
                              label="物流公司"
                              required><div className="inline-blk w220" >{expressCompanyField}</div></FormItem>
                    <FormItem {...formItemLayout}
                              label="物流单号"
                              className={hideClassName}
                              required>{trackingNumberField}</FormItem>
                    <FormItem
                        {...formItemLayout}
                        className={hideClassName}
                        label="物流费用">{logisticsFeesField}</FormItem>
                    <FormItem
                        labelCol={{span:3}}
                        wrapperCol={{span:16}}
                        label="发货备注">{deliveryNoteField}</FormItem>
                </Form>
                <div className="bg-gray p10" style={{margin: "10px -16px -16px -16px"}}>
                    <Row className="w700 mg-auto t-grayer lh28">
                        <Col span={12}>订单号：{order.get('tid')}</Col>
                        <Col span={12}>下单时间：{moment(order.get('ctime')).format('YYYY-MM-DD HH:mm:ss')}</Col>
                        <Col span={12}>配送方式：{order.get('shipMethodName')}</Col>
                        <Col span={12}>配送费用：{(order.get('logisticsFee') || 0).toFixed(2)}</Col>
                    </Row>
                </div>
            </Modal>
        )
    }


    checkLogisticsFees = (rule, value, callback)=>{
        if (!!value) {
            if (value < 0) {
                callback('物流费用须大于0');
                return;
            }else if (!RegExp(/^\d+(?:\.\d{1,2})?$/).test(value)) {
                callback('物流费用仅支持2位小数');
                return;
            }
        }
        callback();
    }

    /**
     * 保持
     */
    onOk() {
        this.props.form.validateFields((errors, values)=>{
            if (!errors) {
                this.props.onOk(values);
            }
        })
    }


    /**
     * 取消
     */
    onCancel() {
        this.props.onCancel();
    }
}

export default Form.create()(Deliver);